<template>
  <div>
    <div>
      <div class="detail-name">
        任务名称
      </div>
      <div class="detail-content">
        <div class="detail-content-text">
          <span>{{ detailObj.name }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="detail-name">
        创建者
      </div>
      <div class="detail-content">
        <div class="detail-content-text">
          <span>{{ detailObj.createBy }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="detail-name">
        执行状态
      </div>
      <div class="detail-content">
        <div class="detail-content-button" :class="detailObj.executeStatus ? 'task-button-blue' : 'task-button-red'">
          {{ detailObj.executeStatus ? '已执行' : '未执行' }}
        </div>
      </div>
    </div>
    <div>
      <div class="detail-name">
        任务状态
      </div>
      <div class="detail-content">
        <div class="detail-content-text">
          <span>{{ detailObj.status === 2 ? '进行中' : '已结束' }}</span>
        </div>
      </div>
    </div>
    <div v-if="detailObj.status === 2">
      <div class="detail-name">
        剩余时间
      </div>
      <div class="detail-content">
        <div class="detail-content-text">
          <!-- <span>约3天7小时</span> -->
          <van-count-down :time="dealTime(detailObj.executeEndTime)">
            <template #default="timeData">
              <span>{{ timeData.days }}</span>
              <span>天</span>
              <span>{{ timeData.hours }}</span>
              <span>时</span>
              <span>{{ timeData.minutes }}</span>
              <span>分</span>
            </template>
          </van-count-down>
        </div>
      </div>
    </div>
    <div v-if="detailObj.status === 3">
      <div class="detail-name">
        任务时间范围
      </div>
      <div class="detail-content">
        <div class="detail-content-text">
          <span>{{ detailObj.executeTime }}--{{ detailObj.executeEndTime }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="detail-name">
        发送内容
      </div>
      <div class="detail-content">
        <div class="content-text">
          {{ detailObj.content }}
        </div>
        <!-- <div class="file-other">
          <van-image
            width="40px"
            height="40px"
            radius="8px"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="file-other-content">
            <div class="other-title">这是文件标题.png</div>
            <div class="other-content">
              这是回答客户提出的问题，大概是回答这是回答客户提出的问题，大概是回答
            </div>
          </div>
        </div>
        <div class="file-pic">
          <van-image
            width="112px"
            height="112px"
            radius="8px"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            class="file-pic-item"
          />
        </div> -->
        <!-- 文件展示 -->
        <ShowFile :materialList="detailObj.materialList" />
      </div>
    </div>
    <!-- <div>
      <div class="detail-name">
        发送目标客户类型
      </div>
      <div class="detail-content">
        <div class="type-top">
          <span>预计{{ detailObj.customerNum }}名客户</span>
        </div>
        <div class="type-tag">
          <div class="type-tag-item" v-for="(item, index) in detailObj.customerTags" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div class="send-button" v-if="detailObj.status === 2"> -->
    <div class="send-button">
      <div
        class="button-send"
        @click="goSend(detailObj)"
        v-if="detailObj.executeStatus === 0 && detailObj.status === 2"
      >
        前往发送
      </div>
    </div>
  </div>
</template>

<script>
import { momentsDetail, momentsFinish } from '@/api/friends'
import { dateFormat } from '@/utils'
import ShowFile from './components/ShowFile.vue'
// import { getUserInfo, login, getWcRedirect } from '@/api/common'
// import router from '@/router/index'
// import { getQueryValue } from '@/utils/index'
// import { getAgentTicket } from '@/api/common'

export default {
  components: {
    ShowFile,
  },
  data() {
    return {
      detailObj: {
        // name: '朋友圈任务名称朋友圈任务名称朋友朋友圈任务名称朋友',
        // createBy: '张三丰',
        // executeTime: '2023-11-12 16:20',
        // executeEndTime: '2023-11-12 16:20',
        // status: 2,
        // content:
        //   '这是引导语很多物业公司以维修监控为名申请使用公共维修资金。公共维修资金由市住建局下属的二级单位物业管理中心下设的基金使用科管理。',
        // materialList: [],
        // customerNum: 53,
        // customerTags: ['hhhhh', 'hhhhh', 'hhhhh', 'hhhhh', 'hhh'],
      },
      count: 0,
    }
  },
  mounted() {
    this.getDetail(this.$route.query.id)
  },
  methods: {
    dealTime(time) {
      let nowTime = +new Date()
      let numTime = +new Date(time)
      if (numTime > nowTime) {
        return numTime - nowTime
      } else {
        return 0
      }
    },
    goSend(item) {
      if (!navigator.userAgent.includes('Mobile')) {
        this.$toast('仅支持手机端发送!')
        return
      }
      let attachments = []
      if (item.materialList && item.materialList.length) {
        if (item.materialList[0].mediaType === '0') {
          // 图片类型
          item.materialList.forEach((el) => {
            let obj = {
              msgtype: 'image', // 消息类型，必填
              image: {
                // mediaid: '', // 图片的素材id
                imgUrl: el.materialUrl, // 图片的imgUrl,跟图片mediaid填其中一个即可
              },
            }
            attachments.push(obj)
          })
        }
        let linkUrl =
          window.document.location.origin +
          window.lwConfig.BASE_URL +
          '#/metrialDetail?materiaId=' +
          item.materialList[0].id +
          '&otherModle=' +
          true
        switch (item.materialList[0].mediaType) {
          case '2':
          case '12':
            // 视频/文章
            attachments = [
              {
                msgtype: 'link', // 消息类型，必填
                link: {
                  title: item.materialList[0].materialName ? item.materialList[0].materialName : ' ', // H5消息标题
                  imgUrl: item.materialList[0].coverUrl
                    ? item.materialList[0].coverUrl
                    : window.lwConfig.DEFAULT_H5_PIC, // H5消息封面图片URL
                  url: linkUrl, // H5消息页面url 必填
                },
              },
            ]
            break
          case '9':
            // 图文
            attachments = [
              {
                msgtype: 'link', // 消息类型，必填
                link: {
                  title: item.materialList[0].materialName ? item.materialList[0].materialName : ' ', // H5消息标题
                  imgUrl: item.materialList[0].coverUrl
                    ? item.materialList[0].coverUrl
                    : window.lwConfig.DEFAULT_H5_PIC, // H5消息封面图片URL
                  url: item.materialList[0].materialUrl ? item.materialList[0].materialUrl : ' ', // H5消息页面url 必填
                },
              },
            ]
            break
          case '3':
            // 普通文件
            attachments = [
              {
                msgtype: 'link', // 消息类型，必填
                link: {
                  title: item.materialList[0].materialName ? item.materialList[0].materialName : ' ', // H5消息标题
                  imgUrl: this.filPicType(item.materialList[0].materialUrl), // H5消息封面图片URL
                  url: linkUrl, // H5消息页面url 必填
                },
              },
            ]
            break
          case '5':
            // 普通文件
            attachments = [
              {
                msgtype: 'link', // 消息类型，必填
                link: {
                  title: item.materialList[0].materialName ? item.materialList[0].materialName : ' ', // H5消息标题
                  imgUrl: item.materialList[0].materialUrl
                    ? item.materialList[0].materialUrl
                    : window.lwConfig.DEFAULT_H5_PIC, // H5消息封面图片URL
                  url: linkUrl, // H5消息页面url 必填
                },
              },
            ]
            break

          default:
            break
        }
      }
      // let attachments = [
      //   {
      //     msgtype: 'image', // 消息类型，必填
      //     image: {
      //       // mediaid: '', // 图片的素材id
      //       imgUrl:
      //         'https://dev.linkwechat.net/fileUpload/afb88b4a-a989-47df-82af-9d285a5cfcb1.png', // 图片的imgUrl,跟图片mediaid填其中一个即可
      //     },
      //   },
      //   {
      //     msgtype: 'image', // 消息类型，必填
      //     image: {
      //       // mediaid: '', // 图片的素材id
      //       imgUrl:
      //         'https://dev.linkwechat.net/fileUpload/afb88b4a-a989-47df-82af-9d285a5cfcb1.png', // 图片的imgUrl,跟图片mediaid填其中一个即可
      //     },
      //   },
      //   // {
      //   //   msgtype: 'link', // 消息类型，必填
      //   //   link: {
      //   //     title: '', // H5消息标题
      //   //     imgUrl: '', // H5消息封面图片URL
      //   //     url: '', // H5消息页面url 必填
      //   //   },
      //   // },
      //   // {
      //   //   msgtype: 'video', // 消息类型，必填
      //   //   video: {
      //   //     mediaid: '', // 视频的素材id
      //   //   },
      //   // },
      // ]
      // console.log(253, attachments)
      let that = this
      wx.invoke(
        'shareToExternalMoments',
        {
          text: {
            content: item.content ? item.content : '', // 文本内容
          },
          attachments: attachments,
        },
        function(res) {
          // alert(res)
          if (res.err_msg == 'shareToExternalMoments:ok') {
            that.getMomentsFinish(item.weMomentsTaskId)
          }
        },
      )
    },
    filPicType(file) {
      let filecontent = JSON.parse(JSON.stringify(file))
      filecontent = filecontent.split('.')
      let type = filecontent[filecontent.length - 1]
      if (type === 'pdf') {
        return window.lwConfig.DEFAULT_H5_PDF
      } else if (['doc', 'docx'].includes(type)) {
        return window.lwConfig.DEFAULT_H5_WORDE
      } else if (['ppt', 'pptx', 'pps', 'pptsx'].includes(type)) {
        return window.lwConfig.DEFAULT_H5_PPT
      } else {
        return ''
      }
    },
    getMomentsFinish(weMomentsTaskId) {
      let sendTime = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      let form = { weMomentsTaskId, sendTime }
      momentsFinish(form)
        .then((res) => {
          console.log(res)
        })
        .catch()
    },
    getDetail(id) {
      id &&
        momentsDetail(id)
          .then((res) => {
            if (res.code === 200) {
              this.detailObj = res.data
            }
          })
          .catch()
    },
  },
}
</script>

<style lang="less" scoped>
.detail-name {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #939aa3;
  line-height: 44px;
  margin-left: 16px;
}
.detail-content {
  width: 100%;
  min-height: 54px;
  background: #ffffff;
  padding: 16px;
  .detail-content-text {
    width: 100%;
    // line-height: 54px;
    font-size: 16px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #1d2129;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0px 0px 0px 0px #e5e6eb;
  }
  .content-text {
    width: 100%;
    font-size: 15px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #4e5969;
    line-height: 24px;
  }
  .detail-content-button {
    width: 52px;
    height: 24px;
    border-radius: 16px 16px 16px 16px;
    line-height: 24px;
    font-size: 12px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    text-align: center;
  }
  .task-button-red {
    background: #fdebeb;
    border: 1px solid #f53f3f;
    color: #f53f3f;
  }
  .task-button-blue {
    border: 1px solid #1869ff;
    background: #e7efff;
    color: #1869ff;
  }

  .file-other {
    padding: 16px;
    width: 100%;
    height: 78px;
    background: #f2f3f5;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    align-items: center;
    .file-other-content {
      width: calc(100% - 56px);
      margin-left: 8px;
      .other-title {
        width: 100%;
        font-size: 15px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #1d2129;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .other-content {
        width: 100%;
        height: 22px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #86909c;
        line-height: 22px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .file-pic {
    .file-pic-item {
      margin-right: 4px;
      margin-bottom: 4px;
    }
  }
  .type-top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    color: #1869ff;
  }
  .type-tag {
    display: flex;
    flex-wrap: wrap;
    .type-tag-item {
      background: #f2f3f5;
      border-radius: 16px 16px 16px 16px;
      padding: 0 12px;
      line-height: 32px;
      text-align: center;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #4e5969;
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
}
.send-button {
  width: 100%;
  display: flex;
  justify-content: center;
  .button-send {
    width: 92.7%;
    height: 44px;
    background: linear-gradient(90deg, #1869ff 0%, #5e8fff 100%);
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    margin: 32px 0;
  }
}
</style>
